<template>
    <div
        style="padding-top: 40px"
        v-loading="pageLoading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-form :model="dataForm" ref="dataForm" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="操作标题">
                        <el-input v-model="dataForm.title" placeholder="" :disabled="isEdit"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="操作描述">
                        <el-input v-model="dataForm.operate" placeholder="" type="textarea" :rows="10" :disabled="isEdit"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-form-item label="操作图片">
                    <div style="color: red">(最多支持3张)</div>

                    <moreUpload
                        :initfileList="pictureListUrl"
                        :isMultiple="true"
                        :upFileNum="3"
                        @moreUpFileHandleRemove="iconMoreUpFileHandleRemove"
                        @update="updateIconUrl"
                    ></moreUpload>
                </el-form-item>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="操作人">
                        <el-input v-model="dataForm.operator" placeholder="" :disabled="isEdit"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="操作时间">
                        <el-date-picker
                            v-model="dataForm.operateTime"
                            type="date"
                            placeholder="选择操作时间"
                            value-format="yyyy-MM-dd"
                            :disabled="isEdit"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <div class="dialog-footer" style="margin: 30px 10px 30px 60px">
                    <!-- <el-button @click="$router.go(-1)">取消</el-button> -->
                    <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
                </div>
            </el-row>
        </el-form>

        <div style="margin: 30px 10px 60px 10px">
              
            <div>
                <span>操作记录</span>
            </div>

            <div style="margin: 30px 30px 60px 30px">
                <el-timeline :reverse="reverse">
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                        <el-form>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="">
                                        <span style="color: #262626; font-size: 18px"> {{ activity.title }} </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="操作人:">
                                        {{ activity.operator }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="操作时间:">
                                        {{ activity.operateTime }}
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="操作描述:">
                                        {{ activity.operate }}
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="操作图片:"> </el-form-item>
                                    <viewer :images="activity.picture">
                                        <el-row class="imgDiv">
                                            <div v-for="(item, index) in activity.picture" :key="index">
                                                <img :src="imgUrlQz + item.id" alt="" class="viewer_img" />
                                            </div>
                                        </el-row>
                                    </viewer>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
    </div>
</template>

<script>
import API from '@/api';
import moreUpload from '../../../components/upLoad/moreUpload';
import moreUpFile from '../../../components/upLoad/moreUpFile';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {
        moreUpload,
        moreUpFile
    },

    data() {
        return {
            dialogType: 1,
            pageType: 1,
            pageLoading: false,
            isEdit: false,
            itemData: {},
            dataForm: {
                title: '', // 操作标题
                operate: '', //操作描述
                picture: '', //操作图片
                operator: '', //操作人
                operateTime: '' //操作时间
            },
            //操作图片
            pictureList: [],
            pictureListUrl: [],
            //操作记录
            reverse: true,
            activities: [],
            imgUrlQz: ''
        };
    },
    mounted() {
        this.itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        this.pageType = this.$route.query.pageType;
        if (type == 2) {
            var id = this.itemData.materialId;
            this.getPageDeail(id); // 获取基本信息
        }

        this.dialogType = type;
    },
    methods: {
        handleClose() {
            this.dataForm = {};
            this.$refs['dataForm'].resetFields();
            this.pictureList = [];
            this.pictureListUrl = [];
        },
        /**
         * 图片 上传
         */

        // 图片 上传文件  成功回调
        updateIconUrl([url, sigleImgId, response, file, fileList]) {
            this.diosposeImageOp([file, fileList]);
        },
        // 删除文件回调
        iconMoreUpFileHandleRemove([file, fileList]) {
            this.diosposeImageOp([file, fileList]);
        },
        diosposeImageOp([file, fileList]) {
            this.pictureList = [];

            for (let index = 0; index < fileList.length; index++) {
                const element = fileList[index];
                console.log('上传的图片：', element);

                if (element.response != null) {
                    //不等于空为刚上传的文件
                    this.pictureList.push(element.response.result[0] + ':' + element.name);
                } else {
                    //为空为之前上传的文件
                    this.pictureList.push(element.urlId + ':' + element.name);
                }
            }
        },

        //保存
        dataFormSubmit() {
            var params = cloneDeep(this.dataForm);
            params.materialId = this.itemData.materialId;

            //处理图片
            if (this.pictureList.length > 0) {
                this.dataForm.picture = this.pictureList.join(',');
                params.picture = this.dataForm.picture;
            }
            console.log('传递的数据：', params);

            API.goodsManger.nzZuiSuOp(params).then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.handleClose();
                            this.activities=[];
                            this.getPageDeail(this.itemData.materialId);
                        }
                    });
                }
            });
        },

        // 获取页面详情
        getPageDeail(materialId) {
            var params = {
                materialId: this.itemData.materialId
            };
            API.goodsManger.nzGetZuiSuList(params).then((data) => {
                console.log('获取的数据：', data);
                if (data.code == '0000') {
                    var activitiesArray = data.result.rows;

                    for (let activitiesIndex = 0; activitiesIndex < activitiesArray.length; activitiesIndex++) {
                        const activitiesElement = activitiesArray[activitiesIndex];
                        var imgUrlList = [];
                        //处理图片数据
                        var imgUrl = activitiesElement.picture;
                        if (imgUrl) {
                            var splitList = imgUrl.split(',');
                            for (let index = 0; index < splitList.length; index++) {
                                const element = splitList[index];
                                var elmentList = element.split(':');
                                //图片
                                var itemData = {
                                    id: elmentList[0],
                                    type: 'img'
                                };
                                imgUrlList.push(itemData);
                            }
                        }
                        activitiesElement.picture = imgUrlList;
                    }
                    this.activities = activitiesArray;
                    this.imgUrlQz = window.baseUrl + '/sys/file/showpic?id=';
                }
            });
        }
    }
};
</script>

<style scoped>
.imgDiv {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}
.viewer_img {
    position: relative;
    margin: 10px 10px;
    width: 100px;
    height: 100px;
}
</style>
